import { useReducer, memo, useMemo, useRef, useCallback, useImperativeHandle, useEffect } from 'react'

import { create } from 'zustand'
const URL = 'http://geek.itheima.net/v1_0/channels'
// 创建zustand的store实例对象
// 函数参数必须返回一个对象，对象内部编写状态数据和方法
// set是用来修改状态数据的方法
// set有两种使用方式
// set使用状态数据给状态数据赋值（set参数为函数，函数内部返回对象）
// set直接给状态数据赋新值（set参数直接为对象）
// const useStore = create((set)=>{
//   return {
//     count:0,
//     inc:()=>{
//       set((state)=>({count : state.count + 1}))
//     },
//       dataList:[],
//       // 异步方法
//       fetchDatalist:async ()=>{
//         const res = await fetch(URL)
//         const jsonRes = await res.json()
//         console.log(jsonRes)
//         set(()=>({dataList:jsonRes.data.channels}))
//       }
//   }
// })

// 拆分子模块
const createCounterStore = (set) => {
  return {
    count: 0,
    inc: () => {
      set((state) => ({ count: state.count + 1 }))
    },
  }
}

const createChannelStore = (set) => {
  return {
    dataList: [],
    // 异步方法
    fetchDatalist: async () => {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      console.log(jsonRes)
      set(() => ({ dataList: jsonRes.data.channels }))
    },
  }
}

// 和并分片
const useStore = create((...a) => {
  return {
    ...createCounterStore(...a),
    ...createChannelStore(...a),
  }
})

function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state.age + 1
    case 'DES':
      return state.age - 1
    case 'SET':
      return action.payload
  }
}
const MemoSon = memo(function Son({ value, handler }) {
  console.log('子组件重新渲染了')
  // handler()
  return (
    <>
      <div onClick={() => handler()}>我是子组件{value.age}</div>
    </>
  )
})

const Son = ({ ref }) => {
  const inputRef = useRef(null)
  const handler = () => {
    console.log('调用点击事件')
  }

  useImperativeHandle(
    ref,
    () => {
      return {
        focus() {
          inputRef.current.focus()
        },
        click() {
          handler()
        },
      }
    },
    []
  )
  return (
    <>
      <input ref={inputRef} />
      <button onclick={handler}>click</button>
    </>
  )
}
function App() {
  // 在组件内部使用store状态数据和方法，从store实例中解构要使用的数据和方法
  const { count, inc, dataList, fetchDatalist } = useStore()
  const [state, dispatch] = useReducer(reducer, { age: 0 })
  const obj = useMemo(() => ({ name: 'wwx' }), [])
  const handler = () => {
    console.log('子组件渲染')
  }
  const sonRef = useRef(null)
  const handlerInput = () => {
    sonRef.current.focus()
    sonRef.current.click()
  }

  useEffect(() => {
    fetchDatalist()
  }, [])
  return (
    <>
      <MemoSon value={obj} onClick={handler} />
      <Son ref={sonRef} />
      <button onClick={handlerInput}>{state.age}</button>
      <button onClick={inc}>{count}</button>
      <ul>
        {dataList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  )
}

export default App
